{% extends 'FortendBundle:Layout:wxLayout.html.twig' %}

{% block title %}首页{% endblock %}

{% block css %}
    <link rel="stylesheet" href="{{ asset('static/css/style.css') }}">
{% endblock %}

{% block content %}
    {#{{ dump(data) }}#}
    <div class="swiper-container">
        <div class="swiper-wrapper">
            {% for item in data.banner_list %}
            <div class="swiper-slide">
                <img src="{{ item.h_image_path }}" alt="">
            </div>
            {% endfor %}
        </div>
        <div class="swiper-pagination"></div>
    </div>

    <div class="weui-flex" style="margin-top: 15px;">
        {% for key, item in data.article_type %}
        <a class="weui-tabbar__item classify_name" onclick="getListDataHandle('{{ item.id }}', '{{ item.name }}');">
            <div class="weui-tabbar__icon">
                <img src="./images/icon_nav_button.png" alt="">
            </div>
            <p class="weui-tabbar__label">{{ item.name }}</p>
        </a>
        {% endfor %}
    </div>

    <div class="item-box">
        <div class="weui-panel weui-panel_access">
            <div class="weui-panel__hd" id="classify_name_model"></div>
            <div class="weui-panel__bd" id="item-data">

            </div>
            <div class="weui-loadmore weui-loadmore_line list_show_text">
                <span class="weui-loadmore__tips">暂无数据</span>
            </div>
            <div class="weui-panel__ft list_show_more">
                <a href="javascript:void(0);" class="weui-cell weui-cell_access weui-cell_link">
                    <div class="weui-cell__bd">查看更多</div>
                    <span class="weui-cell__ft"></span>
                </a>
            </div>
        </div>
    </div>

    {% include '@Fortend/Wx/tabber.html.twig' %}
{% endblock %}

{% block js %}
    <script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/swiper.min.js"></script>
    <script>
        $(function () {
            highlightAction(1);

            // swiper
            var mySwiper = new Swiper('.swiper-container', {
                pagination: '.swiper-pagination',
                loop: true,
                autoplay: 3500,
                autoplayDisableOnInteraction: false,
            });
        });

        // 获取类型列表数据
        var first_classify_name = '{{ data.article_type[0].name }}';
        var first_classify_id = '{{ data.article_type[0].id }}';

        getListDataHandle(first_classify_id, first_classify_name, '1');

        function getListDataHandle(id, name, type) {
            type = type || '2';
            if (first_classify_id !== id || type === '1') {
                var item_data = document.getElementById('item-data');

                document.getElementById('classify_name_model').innerText = name;
                item_data.innerHTML = '';

                getListData(id).then(function (res) {
                    if (res.errorCode === 0) {
                        first_classify_id = id;

                        if (res.data.length !== 0) {
                            $('.list_show_text').hide();
                            $('.list_show_more').show();
                            var html = '', data = res.data;

                            for (var i=0;i<data.length;i++) {
                                html += '<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">\n' +
                                    '                    <div class="weui-media-box__hd">\n' +
                                    '                        <img class="weui-media-box__thumb" style="height: 60px;" src="'+ data[i].thumb_path +'">\n' +
                                    '                    </div>\n' +
                                    '                    <div class="weui-media-box__bd">\n' +
                                    '                        <h4 class="weui-media-box__title">'+ data[i].title +'</h4>\n' +
                                    '                        <p class="weui-media-box__desc">'+ data[i].introduction +'</p>\n' +
                                    '                    </div>\n' +
                                    '                </a>';
                            }

                            item_data.innerHTML = html;
                        } else {
                            $('.list_show_text').show();
                            $('.list_show_more').hide();
                        }
                    }
                }).catch(function (reason) {
                    $.alert('服务器未响应，请稍后重试');
                })
            }
        }

        function getListData(id) {
            id = id || '1';
            var data = {id: id};
            //  显示加载中
            $.showLoading();

            return new Promise(function (resolve, reject) {
                $.ajax({
                    url: '{{ path('api_article_list') }}',
                    data: data,
                    type: 'GET',
                    success: function (res) {
                        resolve(res);
                        $.hideLoading();
                    },
                    error: function () {
                        reject();
                        $.hideLoading();
                    }
                })
            })
        }
    </script>
{% endblock %}